/* 自适应变量（对齐 GrowthMan 案例的做法：容器与列宽随视口平滑变化） */
:root {
  --container-min: 320px;
  --container-max: 1440px;
  --container: clamp(var(--container-min), 92vw, var(--container-max));
  --gap: clamp(16px, 4vw, 60px);
  --col-left: clamp(240px, 28vw, 400px);
  --col-right: clamp(56px, 8vw, 160px);
}

/* 容器 */
.single-3cols {
  max-width: var(--container);
  margin: 0 auto;
  padding: 32px 0 64px;
  box-sizing: border-box;
  display: block;
  font-size: 16px;
  line-height: 1.8;
}
/* 防止出现横向滚动条 */
html, body { max-width: 100%; overflow-x: hidden; }
  
  /* --- 全局锚点滚动偏移，避免被头部遮挡/滚动过头 --- */
:root { --anchor-offset: 180px; --sticky-top: 100px; --container-width: 1440px; --container-left: 0px; --col-left-width: 400px; --col-middle-width: 780px; --col-right-width: 140px; --col-gap: 60px; --brand-red: #DA251C; }
  html { scroll-padding-top: var(--anchor-offset); }
  /* 仅对正文内的锚点标题生效 */
  .col-middle.entry h2[id],
  .col-middle.entry h3[id] { scroll-margin-top: var(--anchor-offset); }
  @media (max-width: 992px) {
    :root { --anchor-offset: 120px; }
  }
  
/* --- 防覆盖增强（提高选择器优先级，确保生效） --- */
body.single .single-3cols.wrap .next-post-bar {
  margin-top: 24px;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  background: #fff !important;
  border: 1px solid #eee !important;
  border-radius: 16px !important;
  padding: 18px 22px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.06) !important;
}
body.single .single-3cols.wrap .next-post-bar .label {
  color: var(--brand-red);
  font-weight: 700 !important;
  letter-spacing: .02em !important;
}
body.single .single-3cols.wrap .next-post-bar .title {
  color: #333;
  font-weight: 700 !important;
  text-decoration: none !important;
  flex: 1 1 auto !important;
}
body.single .single-3cols.wrap .next-post-bar .title:hover { color: var(--brand-red) !important; }
body.single .single-3cols.wrap .next-post-bar .btn-read {
  display: inline-flex;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  border: 1px solid var(--brand-red) !important;
  border-radius: 12px !important;
  color: var(--brand-red) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
body.single .single-3cols.wrap .next-post-bar .btn-read::after {
  content: '→';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--brand-red) !important;
  border-radius: 50% !important;
  line-height: 1;
}
body.single .single-3cols.wrap .next-post-bar .btn-read:hover { background: var(--brand-red) !important; color: #fff !important; }
body.single .single-3cols.wrap .next-post-bar .btn-read:hover::after { border-color: #fff !important; color: #fff !important; }

body.single .single-3cols.wrap .related-cases { margin-top: 32px !important; background: transparent !important; }
body.single .single-3cols.wrap .related-cases .section-header {
  display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 16px !important;
}
body.single .single-3cols.wrap .related-cases .section-title {
  font-size: 22px !important; line-height: 1.2 !important; color: #333 !important; font-weight: 700 !important;
}
body.single .single-3cols.wrap .related-cases .section-more {
  color: var(--brand-red) !important; text-decoration: none !important; font-weight: 600 !important;
}
body.single .single-3cols.wrap .related-cases .section-more:hover { text-decoration: underline !important; }
body.single .single-3cols.wrap .related-cases .cards-grid {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 24px !important;
}
body.single .single-3cols.wrap .related-cases .related-card {
  display: flex !important; flex-direction: column !important; background: #fff !important; border: 1px solid #eee !important; border-radius: 18px !important; overflow: hidden !important; text-decoration: none !important; color: inherit !important; box-shadow: 0 8px 24px rgba(0,0,0,0.06) !important; padding: 18px !important; transition: transform .16s ease, box-shadow .2s ease !important;
}
body.single .single-3cols.wrap .related-cases .related-card .thumb {
  width: 100% !important; aspect-ratio: 1/1 !important; background: var(--brand-red) !important; border-radius: 16px !important; overflow: hidden !important;
}
body.single .single-3cols.wrap .related-cases .related-card .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
body.single .single-3cols.wrap .related-cases .related-card .body { padding: 14px 2px 0 !important; display: flex !important; flex-direction: column !important; gap: 8px !important; }
body.single .single-3cols.wrap .related-cases .related-card .tag { font-size: 13px !important; color: var(--brand-red) !important; }
body.single .single-3cols.wrap .related-cases .related-card .title { font-weight: 700 !important; color: #333 !important; }
body.single .single-3cols.wrap .related-cases .related-card .meta { font-size: 12px !important; color: #888 !important; }
body.single .single-3cols.wrap .related-cases .related-card .desc { font-size: 13px !important; color: #666 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
body.single .single-3cols.wrap .related-cases .related-card:hover { transform: translateY(-2px) !important; box-shadow: 0 12px 30px rgba(0,0,0,0.08) !important; }
body.single .single-3cols.wrap .related-cases .related-card:hover .title { color: var(--brand-red) !important; }
  /* 标题区 - 标题置于中栏，信息条通栏 */
  .single-header { margin: 0 auto 28px; }
  /* 第一行：标题 + 返回按钮，宽度严格 1440px（不使用三列网格） */
  .single-header .head-row {
    max-width: var(--container);
    margin: 0 auto 16px;
    display: grid;
    grid-template-columns: var(--col-left) minmax(0, 1fr) var(--col-right);
    column-gap: var(--gap);
    align-items: center;
    min-height: 72px;
    padding-top: 8px; /* 为按钮与标题留上下外边距效果 */
    padding-bottom: 8px;
  }
  .single-header .entry-title { margin: 0; }
  .single-header .entry-title { grid-column: 1 / 3; text-align: left; }
  .single-header .back-btn {
    grid-column: 3;
    justify-self: end;
    position: static;
    transform: none;
    width: 80px; height: 80px; border-radius: 50%;
    background: #DA251C; /* 红色圆按钮 */
    display: inline-flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 4px;
    text-decoration: none;
  }
  /* 上：白色箭头图标（24×24） */
  .single-header .back-btn::before{
    content: '';
    width: 24px; height: 24px;
    -webkit-mask: url('https://www.geekdance.cn/wp-content/uploads/2025/08/SVG-24.svg') center/contain no-repeat;
    mask: url('https://www.geekdance.cn/wp-content/uploads/2025/08/SVG-24.svg') center/contain no-repeat;
    background-color: #ffffff;
  }
  /* 下：白色“返回”文字（14/24） */
  .single-header .back-btn::after{
    content: '返回';
    color: #ffffff; font-size: 14px; line-height: 24px;
  }
  .single-header .back-btn:hover { filter: brightness(0.95); }
  .single-header .back-btn svg, .single-header .back-btn .text { display: none; }
  /* 保留返回按钮，靠右定位，依赖 head-row 的右侧内边距留位 */

  /* 信息条 */
  .single-header .meta-bar {
    width: 100%;
    background: rgba(0,0,0,0.02);
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    height: 84px; /* 贴近UI高度 */
  }
  .single-header .meta-bar .meta-inner {
    max-width: var(--container);
    margin: 0 auto;
    height: 100%;
    display: grid;
    grid-template-columns: var(--col-left) minmax(0, 1fr) var(--col-right);
    column-gap: var(--gap);
    align-items: center;
  }
  /* 中等屏宽：取消左栏留白，标题与信息条贴容器左边 */
  @media (max-width: 1200px) {
    .single-header .head-row { grid-template-columns: minmax(0, 1fr) var(--col-right); column-gap: 0; }
    .single-header .entry-title { grid-column: 1; }
    .single-header .back-btn { grid-column: 2; }
    .single-header .meta-bar .meta-inner { grid-template-columns: minmax(0, 1fr) var(--col-right); column-gap: 0; }
    .single-header .meta-bar .meta-content { grid-column: 1; }
  }
  @media (max-width: 992px) {
    .single-header .head-row { grid-template-columns: 1fr 56px; column-gap: 0; }
    .single-header .back-btn { grid-column: 2; justify-self: end; }
    .single-header .meta-bar .meta-inner { grid-template-columns: 1fr 56px; column-gap: 0; }
    .single-header .meta-bar .meta-content { grid-column: 1; }
  }
  /* 手机端（≤768px）：加入 16px 安全边距，标题与信息条贴左，返回按钮缩小 */
  @media (max-width: 768px) {
    .single-header .head-row { grid-template-columns: 16px 1fr 48px 16px; column-gap: 0; }
    .single-header .entry-title { grid-column: 2; font-size: 28px; line-height: 1.3; }
    .single-header .back-btn { grid-column: 3; width: 48px; height: 48px; }
    .single-header .meta-bar { height: auto; }
    .single-header .meta-bar .meta-inner { grid-template-columns: 16px 1fr 48px 16px; column-gap: 0; }
    .single-header .meta-bar .meta-content { grid-column: 2; gap: 12px; flex-wrap: wrap; }
    .single-header .meta-bar .author img { width: 32px; height: 32px; }
    .single-header .meta-bar .meta-divider { display: none; }
  }
  .single-header .meta-bar .meta-content { grid-column: 1 / 3; display: flex; align-items: center; gap: 24px; }
  .single-header .meta-bar .author { display: inline-flex; align-items: center; gap: 12px; }
  .single-header .meta-bar .author img { width: 40px; height: 40px; border-radius: 50%; }
  .single-header .meta-bar .author-text { display: flex; flex-direction: column; line-height: 1.05; }
  .single-header .meta-bar .author-text .name { font-weight: 700; color: #ff2a2a; }
  .single-header .meta-bar .author-text .role { color: #a0a0a0; font-size: 12px; margin-top: 4px; }
  .single-header .meta-bar .meta-divider { width: 1px; height: 36px; background: #e8e8e8; }
  .single-header .meta-bar .posted { color: #666; display: inline-flex; align-items: center; gap: 10px; }
  .single-header .meta-bar .posted .label { color: #9a9a9a; }
  .single-header .meta-bar .entry-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #333;
    font-size: 14px;
  }
  .single-header .meta-bar .author {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .single-header .meta-bar .author img { width: 40px; height: 40px; border-radius: 50%; }
  .single-header .meta-bar .name { font-weight: 700; color: #d11; }
  .single-header .meta-bar .meta-divider {
    width: 1px; height: 28px; background: #e9e9e9; margin: 0 8px;
  }
  .single-header .meta-bar .date { color: #666; }
  .entry-title {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: .2px;
    line-height: 1.25;
    margin: 0 0 12px;
  }
  .entry-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #666;
    font-size: 14px;
  }
  .entry-meta .author {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #f7f7f7;
    border: 1px solid #eee;
    border-radius: 999px;
  }
  .entry-meta .author img {
    width: 24px; height: 24px; border-radius: 50%; object-fit: cover;
  }
  .entry-meta .date {
    padding: 6px 10px;
    background: #f7f7f7;
    border: 1px solid #eee;
    border-radius: 999px;
  }
  .entry-meta .dot { opacity: .6; }
  
  /* 三列布局：400 / 780 / 140，间距 60，总宽 1440 */
  .single-3cols.wrap {
    display: grid;
    /* 左固定（随屏变化）、中自适应、右固定（随屏变化） */
    grid-template-columns: var(--col-left) minmax(0, 1fr) var(--col-right);
    column-gap: var(--gap);
    row-gap: 0;
    align-items: stretch;
  }
  /* 移动端（≤768px）：单列布局，隐藏目录；保留右侧并改为底部工具条 */
  @media (max-width: 768px) {
    .single-3cols.wrap { display: block; padding-inline: 16px; }
    .col-left { display: none; }
    .side-card.toc { display: none !important; }
    .side-card.related { display: none !important; }
    .col-right { display: block; margin-top: 12px; }
    .right-sticky { position: static; max-height: none; overflow: visible; }
    .col-middle.entry, .span-middle-right, .span-all { display: block; width: 100%; margin: 0; }

    /* 右侧操作栏改为底部工具条样式 */
    .right-rail { width: 100%; border-left: none; border-top: 1px solid #f4f4f4; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px 0; }
    .share-and-back-container { display: flex; justify-content: center; align-items: center; width: 100%; gap: 20px; }
    .right-rail .share-box { flex-direction: row; gap: 12px; margin-top: 0px!important;}
    .right-rail .share-btn { width: 40px; height: 40px; }
    .right-rail .share-icon { width: 24px; height: 24px; }
    .right-rail .like-box { margin-top: 0; }
    .right-rail .right-sep { display: none; }
	 
    /* 头部与信息栏改为单列堆叠，遵循参考站的移动体验 */
    .single-header { padding-inline: 16px; }
    .single-header .head-row { display: block !important; grid-template-columns: none !important; }
    .single-header .entry-title { grid-column: auto !important; text-align: left; font-size: 28px; line-height: 1.3; margin: 12px 0; }
    .single-header .meta-bar .meta-inner { display: block !important; grid-template-columns: none !important; }
    .single-header .meta-bar .meta-content { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
    .single-header .back-btn { display: none !important; }
  }

  /* 跨列辅助类 */
  .span-middle-right { grid-column: 2 / 4; }
  .span-all { grid-column: 1 / 4; }
  
  /* 左侧 */
  .col-left { display: flex; flex-direction: column; gap: 20px; }
  .side-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 16px;
  }
  /* 目录与推荐阅读：移除边框（保持间距不变） */
  .side-card.toc,
  .side-card.related { border: none; background: transparent; }
  .side-title {
    font-size: 18px; /* 推荐阅读标题尺寸 */
    line-height: 24px;
    font-weight: 600;
    color: #555;
    margin-bottom: 10px;
  }
  .toc .toc-list,
  .toc .toc-sub {
    list-style: none;
    padding-left: 0;
    margin: 0;
  }
  .toc .toc-item { margin: 6px 0; }
  /* 目录项：默认灰色小圆点 + 16/26 文案 */
  .toc .toc-item a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-left: 14px; /* 给圆点留位 */
    text-decoration: none;
    color: #999;
    font-size: 16px;
    line-height: 26px;
    transition: color .2s ease, font-size .2s ease, transform .15s ease;
    transform: scale(var(--toc-scale, 1));
  }
  .toc .toc-item a::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor; /* 跟随文字颜色变化 */
    transform: translateY(-50%);
  }
  /* hover 或 激活状态：品牌红 + 18/26 */
  .toc .toc-item a:hover,
  .toc .toc-item a:focus,
  .toc .toc-item a.active {
    color: var(--brand-red);
    font-size: 18px;
    line-height: 26px;
  }
  .toc .toc-empty, .muted { color: #aaa; font-size: 14px; }
  
  .related-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .related-list li { margin: 8px 0; }
  .related-list a { color: #333; text-decoration: none; }
  .related-list a:hover { color: #0073aa; }

  /* 推荐阅读采用与目录“同款”文字交互，但不显示圆点 */
  .side-card.related ul { list-style: none; padding-left: 0; margin: 0; }
  .side-card.related li { margin: 6px 0; }
  .side-card.related li a {
    display: inline-block;
    text-decoration: none;
    color: #999;
    font-size: 16px;
    line-height: 26px;
    transition: color .2s ease, font-size .2s ease;
  }
  .side-card.related li a:hover,
  .side-card.related li a:focus { color: #DA251C; font-size: 18px; line-height: 26px; }
  
  /* 中间正文 */
  .col-middle.entry {
    min-width: 0;
  }
  .col-middle.entry h2 { font-size: 24px; margin: 28px 0 12px; }
  .col-middle.entry h3 { font-size: 20px; margin: 22px 0 10px; }
  .col-middle.entry img { max-width: 100%; height: auto; }
  .page-links { margin-top: 20px; color: #666; }
  
  /* 左右侧（列级黏性固定） */
.col-left { position: static; }
.col-right { position: static; }
  /* 左侧可滚动容器，超出视口高度时内部滚动 */
.col-left .left-sticky { position: sticky; top: var(--sticky-top); max-height: calc(100vh - var(--sticky-top)); overflow: auto; overscroll-behavior: contain; }
  /* 右侧内部改为静态，由列级 sticky 控制整体固定 */
.right-sticky { position: sticky; top: var(--sticky-top); max-height: calc(100vh - var(--sticky-top)); overflow: visible; overscroll-behavior: contain; }

  /* 当 sticky 在线上主题因父级 overflow/transform 失效时，JS 会在桌面端切换到 .js-fixed
     使左右侧栏在进入正文后采用 position: fixed，直到容器底部再释放 */
.col-left .left-sticky.js-fixed,
.right-sticky.js-fixed {
  position: fixed;
  top: var(--sticky-top);
  max-height: calc(100vh - var(--sticky-top));
  overflow: visible;
  z-index: 10;
}
  
  /* 右侧操作栏（按UI尺寸） */
  .right-rail {
/*     width: 140px; */
    height: 650px;
    border-left: 1px solid #f4f4f4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    padding-top: 16px;
  }
  .right-rail .like-box { margin-top: 6px; }
  .right-rail .right-sep {
    width: 80px; height: 2px; background: #f0f0f0; border-radius: 1px; margin: 8px 0;
  }
  .right-rail .right-share-title {
    color: #c7c7c7; font-size: 16px; line-height: 1; margin: 4px 0 2px; text-align: center;
  }
  .right-rail .share-box { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 20px;}
  .right-rail .share-btn {
    width: 64px; height: 64px; border-radius: 50%; border: 1px solid #eee; display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  }
  .right-rail .share-btn:hover { border-color: #e0e0e0; }

  /* 右侧整体保持视口内，内容超出时右栏内部滚动 */
/*   .right-rail {
    height: auto; //覆盖固定高度 650px
    max-height: calc(100vh - var(--sticky-top));
    overflow: auto;
    overscroll-behavior: contain; //鼠标在右栏时优先滚动右栏
  } */

  /* 正文底部：参考站样式“下一篇 + 阅读下一篇”横条 */
  .next-post-bar { margin-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #fff; border: 1px solid #eee; border-radius: 16px; padding: 18px 22px; box-shadow: 0 10px 28px rgba(0,0,0,0.06); }
  .next-post-bar .label { color: var(--brand-red); font-weight: 700; letter-spacing: .02em; }
  .next-post-bar .title { color: #333; font-weight: 700; text-decoration: none; flex: 1 1 auto; }
  .next-post-bar .title:hover { color: var(--brand-red); }
  .next-post-bar .btn-read { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--brand-red); border-radius: 12px; color: var(--brand-red); font-weight: 700; text-decoration: none; white-space: nowrap; }
  .next-post-bar .btn-read::after { content: '→'; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 2px solid var(--brand-red); border-radius: 50%; line-height: 1; }
  .next-post-bar .btn-read:hover { background: var(--brand-red); color: #fff; }
  .next-post-bar .btn-read:hover::after { border-color: #fff; color: #fff; }

  /* 正文底部：相关案例三卡片 */
  .related-cases { margin-top: 32px; background: transparent; }
  .related-cases .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
  .related-cases .section-title { font-size: 22px; line-height: 1.2; color: #333; font-weight: 700; }
  .related-cases .section-more { color: var(--brand-red); text-decoration: none; font-weight: 600; }
  .related-cases .section-more:hover { text-decoration: underline; }
  .related-cases .cards-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .related-cases .related-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #eee; border-radius: 18px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 8px 24px rgba(0,0,0,0.06); padding: 18px; transition: transform .16s ease, box-shadow .2s ease; }
  .related-cases .related-card .thumb { width: 100%; aspect-ratio: 1/1; background: var(--brand-red); border-radius: 16px; overflow: hidden; }
  .related-cases .related-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .related-cases .related-card .body { padding: 14px 2px 0; display: flex; flex-direction: column; gap: 8px; }
  .related-cases .related-card .tag { font-size: 13px; color: var(--brand-red); }
  .related-cases .related-card .title { font-weight: 700; color: #333; }
  .related-cases .related-card .meta { font-size: 12px; color: #888; }
  .related-cases .related-card .desc { font-size: 13px; color: #666; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .related-cases .related-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); }
  .related-cases .related-card:hover .title { color: var(--brand-red); }

  /* 右侧：更多/下一个案例 小版块 */
  .right-rail .small-block { width: 100%; text-align: center; }
  .right-rail .small-title { color: #999; font-size: 14px; line-height: 1; margin: 6px 0; }
  .right-rail .next-case .next-case-link {
    display: inline-block; max-width: 120px; padding: 8px; border: 1px solid #eee; border-radius: 8px; text-decoration: none; color: #333; font-size: 14px; line-height: 1.3;
  }
  .right-rail .next-case .next-case-link:hover { border-color: var(--brand-red); color: var(--brand-red); }
  .right-rail .more-cases .small-list { list-style: none; padding: 0; margin: 0; }
  .right-rail .more-cases .small-list li { margin: 6px 0; }
  .right-rail .more-cases .small-list a { display: inline-block; text-decoration: none; color: #666; font-size: 13px; line-height: 1.3; }
  .right-rail .more-cases .small-list a:hover { color: #DA251C; }
  .right-rail .small-muted { font-size: 12px; color: #bbb; }

  /* 微信弹窗样式 - 强制隐藏 */
  .wechat-tooltip {display: none !important;}
  .right-rail .share-btn.wechat {
    position: relative;
  } 
  
  .right-rail .share-btn.wechat:hover .wechat-tooltip {
    display: block !important;
  }
  
  .right-rail .share-btn.wechat:hover .wechat-title,
  .right-rail .share-btn.wechat:hover .wechat-qr,
  .right-rail .share-btn.wechat:hover .wechat-text {
    display: block !important;
  }
  
  .right-rail .wechat-tooltip {
	
    position: absolute !important;
    left: 50% !important;
    top: 100% !important;
    transform: translateX(-50%) !important;
    margin-top: 12px !important;
    background: #ffffff !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 12px !important;
    padding: 16px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    z-index: 1000 !important;
    min-width: 200px !important;
    text-align: center !important;
  }
  
  .right-rail .wechat-tooltip::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -8px;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-bottom-color: #ffffff;
  }
  
  .right-rail .wechat-tooltip::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -9px;
    transform: translateX(-50%);
    border: 9px solid transparent;
    border-bottom-color: #e8e8e8;
    margin-top: 1px;
  }
  
  .right-rail .wechat-title {
    font-size: 14px;
    color: #333333;
    margin: 0 0 12px 0;
    font-weight: 500;
  }
  
  .right-rail .wechat-qr {
    width: 120px;
    height: 120px;
    background: #f8f8f8;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    position: relative;
    overflow: hidden;
  }
  
  .right-rail .wechat-qr img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  
  .right-rail .wechat-text {
    font-size: 12px;
    color: #666666;
    line-height: 1.4;
    margin: 0;
  }

  /* 统一使用 CSS mask 填充单色，彻底避免叠色问题 */
  .right-rail .share-icon { width: 28px; height: 28px; display: inline-block; background-color: #cfcfcf; transition: background-color .2s ease; }
  .right-rail .share-icon.wechat { -webkit-mask: url('https://www.geekdance.cn/wp-content/uploads/2025/08/SVG-21.svg') center/contain no-repeat; mask: url('https://www.geekdance.cn/wp-content/uploads/2025/08/SVG-21.svg') center/contain no-repeat; }
  .right-rail .share-icon.weibo  { -webkit-mask: url('https://www.geekdance.cn/wp-content/uploads/2025/08/SVG-22.svg') center/contain no-repeat; mask: url('https://www.geekdance.cn/wp-content/uploads/2025/08/SVG-22.svg') center/contain no-repeat; }
  .right-rail .share-btn:hover .share-icon { background-color: #DA251C; }
  .right-rail .right-back {
    display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; color: #c10d2a; gap: 8px; margin-top: 8px;
  }
  .right-rail .right-back .back-icon { width: 28px; height: 28px; background: url('https://www.geekdance.cn/wp-content/uploads/2025/08/SVG-23.svg') center/contain no-repeat; display: inline-block; }
  .right-rail .right-back .txt { color: #999; }

  /* ===== 右栏点赞（WP ULike）按设计稿样式 ===== */
  .right-rail .like-box { display: flex; flex-direction: column; align-items: center; }
  /* 容器对齐，兼容不同插件输出类名 */
  .right-rail .like-box .wpulike,
  .right-rail .like-box .wp_ulike,
  .right-rail .like-box .wp_ulike_general_class,
  .right-rail .like-box .wp_ulike_is_active { display: flex; flex-direction: column; align-items: center; gap: 10px; }
  /* 点赞按钮外观：64px 圆形描边 */
  .right-rail .like-box .wpulike .wp_ulike_btn,
  .right-rail .like-box .wp_ulike .wp_ulike_btn,
  .right-rail .like-box .wp_ulike_general_class .wp_ulike_btn,
  .right-rail .like-box .wp_ulike_is_active .wp_ulike_btn,
  .right-rail .like-box .wpulike .button,
  .right-rail .like-box .wp_ulike .button { /* 兜底选择器 */
    width: 64px; height: 64px;
    border-radius: 50%;
    border: 1px solid #eeeeee;
    background: #ffffff !important;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: none; outline: none;
  }
  /* 更强兼容：匹配任意包含“ulike”的 a/button */
  .right-rail .like-box :is(a,button)[class*="ulike"] {
    width: 64px; height: 64px;
    border-radius: 50%;
    border: 1px solid #eeeeee;
    background: #ffffff !important;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: none; outline: none; cursor: pointer;
    position: relative;
  }
  .right-rail .like-box :is(a,button)[class*="ulike"] svg,
  .right-rail .like-box :is(a,button)[class*="ulike"] img,
  .right-rail .like-box :is(a,button)[class*="ulike"] i { display: none !important; }
  /* 取消通用 ::before，避免与专用图标叠加导致重复 */
  .right-rail .like-box :is(a,button)[class*="ulike"]::before { content: none !important; }
  .right-rail .like-box :is(a,button)[class*="ulike"]:hover { border-color: #DA251C; transform: scale(1.04); transition: transform .15s ease, border-color .2s ease; }
  /* 按钮内图标（SVG 或 i）统一为品牌红 */
  .right-rail .like-box .wp_ulike_btn svg { width: 28px; height: 28px; }
  .right-rail .like-box .wp_ulike_btn svg [stroke] { stroke: #DA251C; }
  .right-rail .like-box .wp_ulike_btn svg [fill]:not([fill="none"]) { fill: #DA251C; }
  .right-rail .like-box .wp_ulike_btn i,
  .right-rail .like-box .wp_ulike_btn span.icon { color: #DA251C; }
  /* 针对你提供的结构：.wp_ulike_general_class > .wp_ulike_btn + .count-box */
  .right-rail .like-box .wp_ulike_general_class { display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .right-rail .like-box .wp_ulike_general_class .wp_ulike_btn {
    width: 64px; height: 64px; border-radius: 50%; border: 1px solid #eeeeee;
    background: #ffffff !important; background-image: none !important;
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* 使用你提供的 Button.svg 作为掩膜图标，并隐藏插件自带图标，统一交互 */
  .right-rail .like-box .wp_ulike_btn { position: relative; cursor: pointer; transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease; }
  .right-rail .like-box .wp_ulike_btn svg,
  .right-rail .like-box .wp_ulike_btn i,
  .right-rail .like-box .wp_ulike_btn img { display: none !important; }
  /* 使用 ::after 作为唯一图标 */
  .right-rail .like-box .wp_ulike_btn::before { content: none !important; }
  .right-rail .like-box .wp_ulike_btn::after {
    content: '';
    width: 28px; height: 28px; display: inline-block;
    -webkit-mask: url('https://www.geekdance.cn/wp-content/uploads/2025/08/Button.svg') center/contain no-repeat;
    mask: url('https://www.geekdance.cn/wp-content/uploads/2025/08/Button.svg') center/contain no-repeat;
    background-color: #DA251C;
  }
  /* 统一图标：无论 like/unlike 状态都禁止插件的背景图，并使用同一掩膜 */
  .wpulike-default .wp_ulike_put_image.wp_ulike_btn_is_active:after { filter: none!important; }
  .wpulike-default .wp_ulike_put_image:after { background-image: none!important;}
  .right-rail .like-box .wp_ulike_btn:hover { border-color: #DA251C; transform: scale(1.04); }
  .right-rail .like-box .wp_ulike_is_active .wp_ulike_btn,
  .right-rail .like-box .wp_ulike_btn.wp_ulike_btn_is_active { border-color: #DA251C; }
  /* 点赞数字弹跳动画 */
  @keyframes likeCountBump { 0%{transform:translateZ(0) scale(1)} 40%{transform:scale(1.18)} 100%{transform:scale(1)} }
  .right-rail .like-box .count.bump,
  .right-rail .like-box .wp_ulike_count.bump,
  .right-rail .like-box .wpulike-count.bump { animation: likeCountBump .35s ease; }
  /* 数字样式（343） */
  .right-rail .like-box [class*="counter"],
  .right-rail .like-box .wpulike-counter,
  .right-rail .like-box .wp_ulike_counter_up,
  .right-rail .like-box .wp_ulike_counter_down { display: none!important; }
  .wpulike-default .count-box:before { content: none; }
  .right-rail .like-box .like-total { display: flex; justify-content: center; }
  .right-rail .like-box .like-total .wp_ulike_count { font-size: 36px; line-height: 36px; color: var(--brand-red); font-weight: 600; }
  /* 兼容插件把数字放在 .count-box/.wpulike-updated-box 里的情况 */
  .right-rail .like-box .count-box,
  .right-rail .like-box .wpulike-updated-box { background: none; border: 0; padding: 0; box-shadow: none; }
  .like-share .like-wrap { margin-bottom: 16px; }
  .like-share .share-wrap { margin-bottom: 12px; }
  .back-btn {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #eee;
    border-radius: 10px;
    background: #f7f7f7;
    cursor: pointer;
  }
  
  /* 响应式 */
  @media (max-width: 1500px) {
    /* 在 1440 以下，给容器两侧增加最小的呼吸内边距避免贴边 */
    .single-3cols { padding-left: 16px; padding-right: 16px; }
  }
  @media (max-width: 992px) {
    .single-3cols.wrap {
      grid-template-columns: 1fr; /* 单列堆叠（平板同手机） */
      row-gap: 24px;
    }
    .span-middle-right,
    .span-all { grid-column: 1 / -1; }
    /* 平板同手机：隐藏左栏目录与推荐阅读，右栏改为底部工具条 */
    .col-left { display: none; }
    .side-card.toc, .side-card.related { display: none !important; }
    .col-right { display: block; margin-top: 12px; position: static; left: auto; width: 100%; box-sizing: border-box; }
    .col-right .right-sticky { position: static; top: auto; max-height: none; overflow: visible; }
    .right-rail { width: 100%; border-left: none; border-top: 1px solid #f4f4f4; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px 0; box-sizing: border-box; overflow-x: hidden; overflow-y: hidden; }
    .interactive-area-sep { display: block; width: 100%; height: 1px; background-color: #f4f4f4; margin: 12px 0; }
    .share-and-back-container { display: flex; justify-content: center; align-items: center; width: 100%; gap: 20px; flex-wrap: wrap; }
    .right-rail .share-btn { width: 40px; height: 40px; }
    .right-rail .share-icon { width: 24px; height: 24px; }
    .right-rail .like-box { margin-top: 0; }
    .right-rail .right-sep { display: none; }
    /* 平板同手机：头部与信息栏堆叠，隐藏返回按钮 */
    .single-header .back-btn { display: none !important; }
    /* 平板同手机：下一篇横条改为精简的一行布局 */
    .next-post-bar {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      padding: 12px 14px;
      border-radius: 12px;
      box-shadow: none;
      border-color: #f0f0f0;
      justify-content: center; /* Added for centering */
      align-items: center;
    }
    .next-post-bar .label { display: none; }
    .next-post-bar .title {
      flex: 1 1 auto;
      font-size: 16px;
      line-height: 22px;
      font-weight: 600;
    }
    .next-post-bar .btn-read {
      margin-left: 6px;
      padding: 8px 10px;
      border-radius: 10px;
      font-size: 14px;
    }
    .next-post-bar .btn-read::after { width: 18px; height: 18px; }
    /* 相关案例卡片：平板也改为单列 */
    .related-cases .cards-grid { grid-template-columns: 1fr; gap: 16px; }
  }

  @media (min-width: 993px) and (max-width: 1300px) {
    /* PC 小屏也保持三列，避免出现 2+1 的换行 */
    .related-cases .cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  }
	
  /* 手机端专项优化：使“下一篇”更简洁的一行布局 */
  @media (max-width: 768px) {
    .next-post-bar {
      flex-direction: row;
      flex-wrap: wrap;
      padding: 12px 16px;
      border-radius: 10px;
      box-shadow: none;
      border: 1px solid #f0f0f0;
      justify-content: center; /* Added for centering */
      align-items: center;
    }
    .next-post-bar .label {
      display: none;
    }
    .next-post-bar .title {
      font-size: 16px;
      font-weight: 500;
    }
    .next-post-bar .btn-read {
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 14px;
    }
    .next-post-bar .btn-read::after {
      width: 18px;
      height: 18px;
    }
  }
  
  /* 仅文章详情页：解除父级 site-main 对 sticky 的干扰（不影响其它页面） */
  body.single .site-main {
    overflow: visible !important;
    transform: none !important;
    contain: initial !important;
  }
  /* 同时确保本模板容器 sticky 顶部为 200px，可按需在主题头高调整 */
  body.single .single-3cols.wrap { --sticky-top: 200px; }
  body.single .col-left .left-sticky,
  body.single .col-right .right-sticky {
    position: sticky !important;
    top: var(--sticky-top) !important;
    max-height: calc(100vh - var(--sticky-top)) !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    z-index: 10 !important;
  }











/* ==========================================================================
   1. 基础设置 & 变量定义 (Base & Variables)
   ========================================================================== */
:root {
  /* 布局尺寸 */
  --container-max: 1440px;
  --gap: 60px;
  --col-left: 400px;
  --col-right: 140px;
  
  /* 颜色 */
  --brand-red: #DA251C;
  --text-main: #333333;
  --text-gray: #666666;
  --text-light: #999999;
  --border-color: #eeeeee;
  
  /* 功能 */
  --fixed-top: 80px; /* 侧边栏吸顶距离 */
}

/* 强制重置：防止插件锁定 HTML/BODY 滚动 */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto !important; /* 关键：强制允许原生滚动 */
  height: auto !important;
  min-height: 100vh;
}

/* 详情页特定容器重置 */
body.single .site-main,
body.single .site-content,
body.single #page,
.single-3cols.wrap {
  overflow: visible !important;
  transform: none !important;
  contain: none !important;
}

/* ==========================================================================
   2. 核心网格布局 (Grid Layout)
   ========================================================================== */
.single-3cols.wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 32px 0 64px;
  box-sizing: border-box;
  display: grid !important;
  /* 左固定 | 中自适应 | 右固定 */
  grid-template-columns: var(--col-left) minmax(0, 1fr) var(--col-right) !important;
  column-gap: var(--gap) !important;
  align-items: stretch !important;
  position: relative;
}

/* 列容器基础样式 */
.col-left,
.col-middle,
.col-right {
  position: relative !important; /* 保持在文档流中，作为定位参考 */
  min-height: 1px;
}

/* 跨列辅助类 */
.span-middle-right { grid-column: 2 / 4 !important; }
.span-all { grid-column: 1 / 4 !important; }

/* ==========================================================================
   3. 侧边栏固定逻辑 (Fixed Logic) - 核心修复
   ========================================================================== */
/* 默认状态：静态流布局 */
.left-fixed-box,
.right-fixed-box {
  position: static !important;
  width: 100%;
  z-index: 900;
}

/* 状态A：悬浮中 (JS控制) */
.js-fixed-active {
  position: fixed !important;
  top: var(--fixed-top) !important;
  z-index: 999 !important;
  margin: 0 !important;
  /* width 由 JS 动态计算并赋值，确保与父容器一致 */
}

/* 状态B：已到底部 (JS控制) */
.js-fixed-stop {
  position: absolute !important;
  top: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 900;
}

/* ==========================================================================
   4. 头部区域 (Header)
   ========================================================================== */
.single-header {
  max-width: var(--container-max);
  margin: 0 auto 28px;
}

/* 头部第一行：标题 + 返回按钮 */
.single-header .head-row {
  display: grid;
  grid-template-columns: var(--col-left) minmax(0, 1fr) var(--col-right);
  column-gap: var(--gap);
  align-items: center;
  margin-bottom: 16px;
  min-height: 72px;
}

.single-header .entry-title {
  grid-column: 1 / 3;
  font-size: 36px;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.25;
  margin: 0;
}

.single-header .back-btn {
  grid-column: 3;
  justify-self: end;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--brand-red);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
  gap: 4px;
  transition: opacity 0.2s;
}
.single-header .back-btn:hover { opacity: 0.9; }
/* 返回按钮图标 */
.single-header .back-btn::before {
  content: '';
  width: 24px; height: 24px;
  background-color: #fff;
  -webkit-mask: url('https://www.geekdance.cn/wp-content/uploads/2025/08/SVG-24.svg') center/contain no-repeat;
  mask: url('https://www.geekdance.cn/wp-content/uploads/2025/08/SVG-24.svg') center/contain no-repeat;
}
.single-header .back-btn::after {
  content: '返回';
  font-size: 14px;
}

/* 信息条 (Meta Bar) */
.single-header .meta-bar {
  background: rgba(0,0,0,0.02);
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  padding: 20px 0;
}
.single-header .meta-bar .meta-inner {
  display: grid;
  grid-template-columns: var(--col-left) minmax(0, 1fr) var(--col-right);
  column-gap: var(--gap);
  padding: 0 20px; /* 稍微内缩 */
}
.single-header .meta-bar .meta-content {
  grid-column: 1 / 3;
  display: flex;
  align-items: center;
  gap: 24px;
}
/* 作者信息 */
.single-header .author { display: flex; align-items: center; gap: 12px; }
.single-header .author img { width: 40px; height: 40px; border-radius: 50%; }
.single-header .author .name { font-weight: 700; color: var(--brand-red); }
.single-header .author .role { font-size: 12px; color: #999; margin-top: 2px; }
.single-header .meta-divider { width: 1px; height: 30px; background: #e8e8e8; }
.single-header .posted { color: #666; font-size: 14px; }

/* ==========================================================================
   5. 左侧边栏 (TOC)
   ========================================================================== */
.col-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.side-card {
  padding: 10px 0;
}
.side-title {
  font-size: 18px;
  font-weight: 600;
  color: #555;
  margin-bottom: 16px;
}

/* 目录样式 */
.toc-list { list-style: none; padding: 0; margin: 0; }
.toc-item { margin: 8px 0; }
.toc-item a {
  display: block;
  position: relative;
  padding-left: 16px;
  color: #999;
  font-size: 16px;
  line-height: 1.6;
  text-decoration: none;
  transition: all 0.2s ease;
}
/* 圆点装饰 */
.toc-item a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ccc;
  transition: background 0.2s;
}
/* 激活/悬停状态 */
.toc-item a:hover,
.toc-item a.active {
  color: var(--brand-red);
  font-size: 18px; /* 放大 */
  font-weight: 500;
}
.toc-item a:hover::before,
.toc-item a.active::before {
  background: var(--brand-red);
}

/* ==========================================================================
   6. 右侧边栏 (Right Rail)
   ========================================================================== */
.right-rail {
  border-left: 1px solid #f4f4f4;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  min-height: 400px;
}

/* 分享按钮组 */
.right-share-title { color: #ccc; font-size: 14px; margin-bottom: -10px; }
.share-box { display: flex; flex-direction: column; gap: 16px; }
.share-btn {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  cursor: pointer;
  background: #fff;
}
.share-btn:hover { border-color: #ddd; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }

/* 图标处理 */
.share-icon {
  width: 28px; height: 28px;
  background-color: #ccc;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
}
.share-btn:hover .share-icon { background-color: var(--brand-red); }
.share-icon.wechat { -webkit-mask-image: url('https://www.geekdance.cn/wp-content/uploads/2025/08/SVG-21.svg'); mask-image: url('https://www.geekdance.cn/wp-content/uploads/2025/08/SVG-21.svg'); }
.share-icon.weibo { -webkit-mask-image: url('https://www.geekdance.cn/wp-content/uploads/2025/08/SVG-22.svg'); mask-image: url('https://www.geekdance.cn/wp-content/uploads/2025/08/SVG-22.svg'); }

/* 微信弹窗 (重要修复) */
.share-btn.wechat { position: relative; }
.wechat-tooltip {
  display: none; /* 默认隐藏 */
  position: absolute;
  right: 100%; /* 默认PC端在左侧弹出 */
  top: 50%;
  transform: translateY(-50%);
  margin-right: 16px;
  background: #fff;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  border: 1px solid #eee;
  z-index: 99999;
  width: 160px;
  text-align: center;
}
.share-btn.wechat:hover .wechat-tooltip { display: block !important; }
.wechat-qr { width: 120px; height: 120px; background: #f0f0f0; margin: 0 auto; }
.wechat-qr img { width: 100%; height: 100%; object-fit: contain; }
.wechat-title { font-size: 14px; font-weight: 500; margin-bottom: 8px; display: block; }
.wechat-text { font-size: 12px; color: #999; margin-top: 8px; display: block; }

/* 点赞区域 */
.like-box { margin-top: 10px; }
/* 适配各种点赞插件结构 */
.like-box .wp_ulike_btn, .like-box button {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 1px solid #eee;
  background: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.like-box .wp_ulike_btn::after {
  content: '';
  width: 28px; height: 28px;
  background-color: var(--brand-red);
  -webkit-mask: url('https://www.geekdance.cn/wp-content/uploads/2025/08/Button.svg') center/contain no-repeat;
  mask: url('https://www.geekdance.cn/wp-content/uploads/2025/08/Button.svg') center/contain no-repeat;
}
/* 隐藏插件原生内容 */
.like-box .wp_ulike_btn svg, .like-box .wp_ulike_btn i, .like-box .wp_ulike_btn img { display: none !important; }
.like-box .wp_ulike_btn:hover { transform: scale(1.1); border-color: var(--brand-red); }

/* 右侧返回列表 (PC) */
.right-back-pc {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #999;
}
.right-back-pc .back-icon {
  width: 28px; height: 28px;
  background: url('https://www.geekdance.cn/wp-content/uploads/2025/08/SVG-23.svg') center/contain no-repeat;
}
.right-back-pc:hover { color: var(--brand-red); }

/* 移动端返回按钮：PC端默认隐藏 */
.right-back-mobile { display: none !important; }


/* ==========================================================================
   7. 底部区域 (Bottom)
   ========================================================================== */
/* 下一篇 */
.next-post-bar {
  margin-top: 40px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}
.next-post-bar .label { color: var(--brand-red); font-weight: 700; }
.next-post-bar .title { font-size: 18px; font-weight: 700; color: #333; text-decoration: none; }
.next-post-bar .title:hover { color: var(--brand-red); }
.next-post-bar .btn-read {
  padding: 8px 16px;
  border: 1px solid var(--brand-red);
  border-radius: 20px;
  color: var(--brand-red);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s;
}
.next-post-bar .btn-read:hover { background: var(--brand-red); color: #fff; }

/* 相关案例 */
.related-cases { margin-top: 40px; }
.related-cases .section-header { display: flex; justify-content: space-between; margin-bottom: 20px; }
.related-cases .section-title { font-size: 24px; font-weight: 700; }
.related-cases .section-more { color: var(--brand-red); text-decoration: none; font-weight: 600; }

.related-cases .cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.related-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: #333;
  transition: transform 0.2s;
}
.related-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
.related-card .thumb { width: 100%; aspect-ratio: 1/1; background: #f5f5f5; }
.related-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.related-card .body { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.related-card .title { font-weight: 700; font-size: 16px; line-height: 1.4; }
.related-card .desc { font-size: 13px; color: #666; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ==========================================================================
   8. 响应式适配 (Responsive) - 统一管理
   ========================================================================== */

/* 1200px 以下：收缩间距 */
@media (max-width: 1200px) {
  :root { --gap: 30px; --col-left: 280px; }
}

/* 992px 以下：平板模式 (Disable Fixed, Stack Layout) */
@media (max-width: 992px) {
  :root { --gap: 20px; }
  
  .single-3cols.wrap {
    display: block !important; /* 取消网格，改为流式堆叠 */
    padding: 20px 16px;
  }
  
  /* 隐藏左侧目录 */
  .col-left { display: none !important; }
  
  /* 中间内容全宽 */
  .col-middle, .span-middle-right, .span-all {
    width: 100% !important;
    margin-bottom: 30px;
  }
  
  /* 禁用 Fixed 效果，还原为普通流 */
  .left-fixed-box, .right-fixed-box,
  .js-fixed-active, .js-fixed-stop {
    position: static !important;
    width: auto !important;
    top: auto !important;
  }
  
  /* 右侧栏：移到底部，改为横向工具条 */
  .col-right {
    margin-top: 40px;
    border-top: 1px solid #eee;
    padding-top: 20px;
  }
  .right-rail {
	display: flex;
    border-left: none;
    flex-direction: column; /* 横向排列 */
    justify-content: center;
    min-height: auto;
    padding-top: 0;
  }
  .right-back-pc { display: none !important; } /* 隐藏PC返回按钮 */
  .right-back-mobile { display: inline-flex !important; } /* 显示移动端返回按钮 */
  
  /* 微信弹窗在移动端/平板端的特殊处理：居中覆盖，提升优先级 */
  .right-rail .share-btn.wechat:hover .wechat-tooltip,
  .wechat-tooltip {
    display: none !important; /* 确保显示 */
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    width: 260px !important;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.5) !important; /* 遮罩层 */
    z-index: 2147483647 !important; /* 最高层级 */
  }
  .wechat-tooltip::before, .wechat-tooltip::after { display: none !important; }
  
  /* 相关案例单列 */
  .related-cases .cards-grid { grid-template-columns: 1fr; }
  
  /* 头部调整 */
  .single-header .head-row { display: block; height: auto; }
  .single-header .entry-title { font-size: 28px; margin-bottom: 16px; }
  .single-header .back-btn { display: none; } /* 移动端通常用浏览器返回，或顶部导航 */
  .single-header .meta-bar .meta-inner { display: block; padding: 0 10px; }
  .single-header .meta-bar .meta-content { flex-wrap: wrap; }
}

/* 768px 以下：手机模式 */
@media (max-width: 768px) {
  /* 下一篇简化 */
  .next-post-bar { flex-direction: row; align-items: flex-start; }
  .next-post-bar .btn-read { text-align: center; justify-content: center; }
  
  /* 右侧工具条更紧凑 */
  .right-rail { gap: 12px; border-top-width: 0px!important;}
  .share-btn, .like-box .wp_ulike_btn { width: 48px; height: 48px; }
  .share-icon { width: 24px; height: 24px; }
}